<template>
  <div class="audioArea" :class="{'noAnimation':!OpenMusic}" @click="setMusic()">
    <img v-if="OpenMusic" :src="icon?icon:iconLocal" alt=""/>
	<img v-else :src="stopIcon?stopIcon:closeLocal" alt=""/>
  </div>
</template>

<script>
import {mapGetters, mapState} from "vuex";
import wxModule from "jweixin-module";
import {isWeiXin} from '@/until/QFH5.js'

export default {
  name: "audioSet",
  computed:{
	  //音乐动画控制 如果全局多出控制 只要有一个调用addEvent极即可
	  ...mapGetters(['OpenMusic','MusicObj'])
  },
  data(){
    return{
      ifPlay:false,
      innerAudioContext:{},
      firstStart:0,
	  iconLocal:require('../../static/answer/music_auto.png'),
	  closeLocal:require('../../static/answer/music_close.png')
    }
  },
  props:{
    music:{
      type:String,
      default: {}
    },
	icon:{
		type:String,
		default:null
	},
	stopIcon:{
		type:String,
		default:null
	}
  },
  methods:{
    setMusic(){
		//全局一首歌
      if(this.OpenMusic){
        this.MusicObj.pause()
      }else{
       this.MusicObj.play()
      }
    },
    play(){
      this.MusicObj.play()
	  let _this = this
      document.addEventListener("WeixinJSBridgeReady", function () {
        _this.MusicObj.play()
      }, false);
	  // this.innerAudioContext.play()
	  // document.addEventListener("WeixinJSBridgeReady", function () {
	  //   this.MusicObj.play()
	  // }, false);
      /*document.addEventListener("touchstart",this.innerAudioContext.play(), false);*/
    },
    addEvent(){
		if(this.MusicObj==null){
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;
			this.innerAudioContext.src = this.music
			this.innerAudioContext.sessionCategory = 'soloAmbient'
			this.innerAudioContext.loop = true
			let _this = this
			this.innerAudioContext.onPlay(() => {
			  this.$store.commit('SET_MUSIC_OPEN',true)
			  this.ifPlay = true
			});
			this.innerAudioContext.onPause(() => {
			  this.$store.commit('SET_MUSIC_OPEN',false)
			  this.ifPlay = false
					
			});
			// this.$store.dispatch('createMusic',this.innerAudioContext)
			this.$store.commit('SET_MUSIC',this.innerAudioContext)
			setTimeout(()=>{
				_this.play()
			},200)
		}
	 
    }
  },
  mounted() {
	  this.addEvent()
  }
}
</script>

<style scoped lang="scss">
@import url("../../plugin/pages/animation.css");
.audioArea {
  line-height: 0;
  animation: tada 1s infinite linear;
  /*transform-origin: 50% 50%;*/
  img {
    height: 48rpx;
	width: 48rpx;
  }
}
.noAnimation{
  animation:none;
}
</style>
